<template>
  <section>
    <el-form label-width="80px" inline>
      <el-form-item label="定位">
        <el-cascader v-model="selPosition" @change="selPositionEvent" :options="pageList" change-on-select size="mini" :props="setProps" v-if="pageList"></el-cascader>
      </el-form-item>
      <!--<el-form-item label="页面">-->
        <!--<el-select size="mini" v-model="selPage"  @change="selPageEvent">-->
          <!--<el-option v-for="(page,index) in pageList" :key="index" :value="page.code" :label="page.name"></el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="方位" v-if="selPage">-->
        <!--<el-select size="mini" v-model="selPlace"  @change="selPlaceEvent">-->
          <!--<el-option v-for="(place,index) in placeList" :key="index" :value="place.code" :label="place.name"></el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "getPosition",
    props:['client','adPosition'],
    data(){
      return{
        pageList:null,
        setProps:{
          value:'code',
          label:'name',
          children:'childrens'
        },
        selPosition:[]
      }
    },
    watch:{
      client(nv,ov){
        if(nv){
          this.getClient(nv)
        }
      },
    },
    created(){
      this.getClient(this.client)
      if(this.adPosition){
        //如果有，就要拆分一下
        console.log('看下原有的定位----------',this.adPosition.split('_'))
        this.selPosition=this.adPosition.split('_')
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getClient(id){
        this.fetch({name:"getClient",data:{id}})
          .then(res=>{
            console.log('选中的客户端==',res)
            if(res.clientData.ad_position){
              this.pageList=res.clientData.ad_position
            }else {
              this.pageList=[]
              this.$message({type:'warn',message:'当前客户端未设置页面'})
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selPlaceEvent(e){
        console.log('选了方位--------',e)
        let tmp=''
        tmp +=this.selPage+'_'+e
        console.log('让我看看组合的字符串-------',tmp)
        this.$emit('selPosition',tmp)
      },
      selPositionEvent(e){
        console.log('联机选择------',e)
        let tmp=''
        if(e.length >1){
          for(let i=0;i<e.length;i++){
            if(i === e.length-1){
              tmp+= e[i]
            }else {
              tmp += e[i]+'_'
            }
          }
        }else {
          tmp=e[0]
        }
        this.$emit('selPosition',tmp)
      }
    }
  }
</script>

<style scoped>

</style>
